<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>语音交互系统</title>
    <script src="https://cdn.socket.io/4.6.1/socket.io.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f0f2f5;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        #animation {
            display: none;
            width: 100px;
            height: 100px;
            border: 10px solid #ddd;
            border-top: 10px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 20px;
        }

        @keyframes spin {
            0%   { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        #text {
            margin-bottom: 20px;
            text-align: center;
        }

        #recordBtn {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        #recordBtn:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <div id="animation"></div>
    <div id="text">点击下方按钮开始录音</div>
    <button id="recordBtn">开始录音</button>

    <script>
        const socket = io();
        const animation = document.getElementById('animation');
        const text = document.getElementById('text');
        const recordBtn = document.getElementById('recordBtn');
        let isRecording = false;

        socket.on('connect', () => {
            console.log('连接服务器成功');
        });

        socket.on('playback_status', (data) => {
            if (data.status === 'start') {
                animation.style.display = 'block';
                text.textContent = '正在播放语音...';
            } else if (data.status === 'end') {
                animation.style.display = 'none';
                text.textContent = '播放结束，等待下一条语音...';
            }
        });

        recordBtn.addEventListener('click', () => {
            if (!isRecording) {
                fetch('/start_recording', {
                    method: 'POST'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'started') {
                        isRecording = true;
                        recordBtn.textContent = '停止录音';
                        text.textContent = '正在录音中，请说话...';
                    }
                });
            } else {
                fetch('/stop_recording', {
                    method: 'POST'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'stopped') {
                        isRecording = false;
                        recordBtn.textContent = '开始录音';
                        text.textContent = '已停止录音，等待处理结果...';
                    }
                });
            }
        });
    </script>
</body>
</html>
